<template>
  <el-container style="width:100%;margin:30px auto;">
    <el-aside style="width: 15%">
      <el-menu
          :default-openeds="['1','3']"
          :router="true"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
        <el-submenu index="1" unique-opened="true">
          <template slot="title">
            <i class="el-icon-document"></i>
            <span>管理员信息</span>
          </template>
          <el-menu-item-group>
            <template slot="title">查看</template>
            <el-menu-item index="/manager/admin" >管理员明细</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-s-custom"></i>
            <span>用户信息</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/manager/user" :class="$route.path=='/manager/user'">用户列表查看</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"><i class="el-icon-box"></i>
            <span>快递信息</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/manager/orders" :class="$route.path=='/manager/order'">快递明细</el-menu-item>
            <el-menu-item index="/manager/map" :class="$route.path=='/manager/map'">物流轨迹</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title"><i class="el-icon-receiving"></i>
            <span>仓库管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/manager/station" :class="$route.path=='/manager/station'" >仓储明细</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title"><i class="el-icon-date"></i>
            <span>站点规则</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/manager/standard" :class="$route.path=='/manager/station'" >计价标准</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="6">
          <template slot="title"><i class="el-icon-truck"></i>
            <span>车辆管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/manager/car" :class="$route.path=='/manager/car'" >车辆明细</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="7">
          <template slot="title"><i class="el-icon-user-solid"></i>
            <span>物流人员管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/manager/driver" :class="$route.path=='/manager/driver'">物流人员明细</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="8">
          <template slot="title"><i class="el-icon-s-finance"></i>
            <span>财务管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/manager/finance" :class="$route.path=='/manager/finance'" >收入明细</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="9">
          <template slot="title"><i class="el-icon-data-analysis"></i>
            <span>报表分析</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/manager/trans" :class="$route.path=='/manager/trans'" >物流运输统计</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="10">
          <template slot="title"><i class="el-icon-s-platform"></i>
            <span>界面显示</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/manager/main" :class="$route.path=='/manager/main'" >主界面</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="/manager/receipt" :class="$route.path=='/manager/receipt'" >主界面</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header>
        <h2>极兔物流管理系统&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span style="text-align:right;font-size: 20px">&nbsp;&nbsp;&nbsp;&nbsp;   {{this.$store.getters.getUser.loginName}}     <a  @click="logout">登出</a></span>
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item index="/manager/admin" :class="$route.path=='/manager/admin'">查看</el-dropdown-item>
              <el-dropdown-item>修改</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </h2>
      </el-header>

      <!-- 显示内容 -->
      <el-main>
        <router-view>
        </router-view>

      </el-main>
    </el-container>
  </el-container>
</template>

<script>

import jsCookie from "js-cookie";

export default {
  name: "ManagerView",
  computed:{
    showLoginName(){
      return jsCookie.get('loginName')
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    logout() {
      /*this.$store.commit("REMOVE_INFO")
      this.$router.replace('/login')
      this.$message({showClose: true, message: "成功登出", type: 'success'});

    }*/
      //退出操作
      const _this = this
      //首先调用后端logout接口(因该接口需要认证权限,所以需要传入token)
      //其次调用$store清除用户信息及token
      const token=localStorage.getItem("token")
      console.log(_this.$store.getters.getUser.loginName)
      console.log(token)
      _this.$axios.get(`http://localhost:8099/logout/${_this.$store.getters.getUser.loginName}`).then(res => {
          _this.$store.commit("REMOVE_INFO")
          _this.$router.push("/login")
        })
      },

  }


}
</script>

<style scoped>
.el-header, .el-footer {
  background-color: #e6a71f;
  color: whitesmoke;
  text-align: center;
  height:auto;
}

.el-aside {
  text-align: center;
  overflow: hidden;
}

.el-main {
  color: #333;
  text-align: center;
}

</style>